<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="IsShowFormDelay"
      width="680px"
      class="dt-content-project-card-dialog"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeFormDelay"
    >
      <p class="dt-content-project-card-dialog-title">
        该任务已经<span>延期{{ Math.abs(delayDay) }}天</span>，请填写延期原因
      </p>
      <!-- <el-input v-model="delayReason" autocomplete="off"></el-input> -->
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请填写延期原因"
        v-model="delayReason"
        maxlength="200"
        show-word-limit
        @focus="getFocus"
        @blur="getBlur"
      >
      </el-input>
      <p v-show="isShowTip" style="color: #f5222d; font-size: 12px; line-height: 1">请填写延期原因</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="delayCompleteTask" :loading="loading.delay">确定</el-button>
        <el-button @click="closeFormDelay">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  head() {
    return {
      script: []
    }
  },
  props: {
    // rootProjectId: String,
    taskId: String,
    delayDay: Number,
    IsShowFormDelay: Boolean
  },
  watch: {},
  data() {
    return {
      loading: { delay: false },
      delayReason: '',
      isShowTip: false,
      Uid: this.$tools.getDecrypt(this.$store.state.uid) //用户id,
      //   IsShowFormDelay: false
    }
  },
  computed: {
    //查询
    query() {
      return this.$tools.getQuery(this)
    }
  },
  methods: {
    closeFormDelay() {
      this.isShowTip = false
      this.delayReason = ''
      this.$emit('closeFormDelay')
    },
    delayCompleteTask() {
      if (this.delayReason == '') {
        this.isShowTip = true
        return
      } else {
        this.isShowTip = false
      }
      this.loading.delay = true
      var data = [
          {
            taskId: this.taskId,
            userId: this.Uid,
            delayReason: this.delayReason,
            groupId: this.query.groupId || ''
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/task/completeInnerTask'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                message: data.message,
                type: 'success',
                duration: '2000',
                onClose: () => {
                  this.$emit('updataList')
                  this.closeFormDelay()
                  this.loading.delay = false
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {
                  this.loading.delay = false
                }
              })
            }
          })
        })
        .catch((error) => {
          this.loading.delay = false
        })
    },
    getFocus() {
      this.isShowTip = false
    },
    getBlur() {
      if (this.delayReason == '') {
        this.isShowTip = true
      } else {
        this.isShowTip = false
      }
    }
  },
  mounted() {}
}
</script>
<style scoped>
/* 延期弹窗开始 */
.dt-content-project-card-dialog >>> .el-dialog__body {
  padding-top: 2px;
  padding-bottom: 20px;
}
.dt-content-project-card-dialog >>> .el-dialog__footer {
  padding-top: 0px;
}
.dt-content-project-card-dialog-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 12px;
}
.dt-content-project-card-dialog-title > span {
  color: #f5222d;
}
/* 延期弹窗结束 */
</style>
